<template>
    <baidu-map
      class="bm-view"
      ak="N2p6isvbMjUuqa2yS1ZqxzCTttlxkKll"
      :center="mapConfig.center"
      :zoom="mapConfig.zoom"
      @ready="mapInit">
      <bml-marker-clusterer
      v-if="markersList.length != 0"
      :averageCenter="true"
      >
        <div
          v-for="(item, index) in markersList"
          :key="index"
        >
          <BmMarker
            :position="item.point"
            :icon="{ url: item.url, size: item.size }"
            @click="markerClick(item, $event)"
          >
          </BmMarker>
        </div>
      </bml-marker-clusterer>
      <BmInfoWindow
        :position="infoWindowConfig.point"
        :show="infoWindowConfig.show"
        :offset="infoWindowConfig.offset"
        @open="infoWindowOpen"
        @close="infoWindowClose">
        <pluginPopup></pluginPopup>
      </BmInfoWindow>
    </baidu-map>
</template>
<script>
import { BaiduMap, BmMarker, BmInfoWindow, BmlMarkerClusterer } from 'vue-baidu-map';
import pluginPopup from '@/views/templates/pluginMapFrame/pluginPopup/index.vue';
import { styleJson } from '@data/mapjson/styleJson.js';
export default {
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
    BmlMarkerClusterer,
    pluginPopup
  },
  data() {
    return {
      BMap: '',
      map: '',
      styleType:'JSON', // 可选值JSON和'',JSON是地图JSON的样式，''是默认的样式
      mapConfig: {
        center: { lng: 121.86917, lat: 29.47758 },
        zoom: 18,
      },
      markersList: [
        {
          point: { lng: 121.86917, lat: 29.47758 },
          url: 'https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/map-icon.png',
          size: { width: 77, height: 111 }
        },
        {
          point: { lng: 121.86717, lat: 29.47658 },
          url: 'https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/map-icon.png',
          size: { width: 77, height: 111 }
        },
      ],
      infoWindowConfig: {
        point: { lng: 121.86917, lat: 29.47758 },
        show: false,
        offset: { width: 0, height: 0 },
      }
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    // 初始化函数，返回一个百度地图的BMap核心类和地图map实例
    mapInit({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      this.map.enableScrollWheelZoom();
      this.map.enableContinuousZoom();
      // vue-baidu-map使用的是官方2.0的api,而个性编辑器的2.0版本已停止更新需要给2.0升级到3.0
      // 从而可以使用3.0的setMapStyleV2这个方法
      // node_modules里面的vue-baidu-map/components/map/Map.vue
      // script.src = https://api.map.baidu.com/apiv=2.0&ak={ak}&callback=_initBaiduMap
      // 改成
      // script.src = https://api.map.baidu.com/apiv=3.0&ak=${ak}&callback=_initBaiduMap
      this.map.setMapStyleV2({
        styleJson: this.styleType==='JSON'?styleJson:''
      });
    },
    // 点击标注点触发
    markerClick(item, $event) {
      this.zoom = this.map.getZoom();
      this.infoWindowConfig.point = item.point;
      this.infoWindowConfig.show = true;
      $event.domEvent.stopPropagation();
    },
    infoWindowOpen() {
      // 信息窗口开启时触发  可以用于请求信息窗口展示的内容
      this.infoWindowConfig.show = true;
    },
    infoWindowClose() {
      // 信息窗口关闭时触发
      this.infoWindowConfig.show = false;
    },
    // 随机生成若干标记点
    addPoints() {
      console.log('addPoints');
      const points = [];
      for (var i = 0; i < 500; i++) {
        const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21 };
        points.push({
          point: position,
          url: 'https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/map-icon.png',
          size: { width: 25, height: 50 }
        });
      }
      this.markersList = points;
      console.log(this.markersList);
    },
  }
};
</script>
<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 100%;

}
// //隐藏边角
::v-deep .BMap_pop div:nth-child(1) div{
  background: none !important;
  border: none !important;
}
::v-deep .BMap_pop div:nth-child(3) div{//右上方块
    display: none;
}
::v-deep .BMap_pop div:nth-child(5) div {//左下方块
    display: none;
}
::v-deep .BMap_pop div:nth-child(7) div{//右下方块
    display: none;
}
::v-deep .BMap_shadow {
    display: none;
}
::v-deep .BMap_pop .BMap_center {
  border: none;
  background-color: aquamarine;
}
::v-deep .BMap_pop .BMap_top {
    display: none;
}
::v-deep .BMap_pop .BMap_bottom {
    display: none;
}
::v-deep .BMap_pop img {
    display: none;
}
</style>
